<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>丢掉XX</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Helvetica Neue', sans-serif, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
            touch-action: manipulation;
        }

        .container {
            width: 100%;
            max-width: 800px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        /* 起始界面样式 */
        #startScreen {
            text-align: center;
            width: 100%;
            max-width: 500px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .subtitle {
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0.9;
        }

        .input-group {
            margin-bottom: 25px;
            text-align: left;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-size: 1.1rem;
        }

        input {
            width: 100%;
            padding: 15px;
            font-size: 1.1rem;
            border: none;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            outline: none;
        }

        button {
            padding: 15px 30px;
            font-size: 1.2rem;
            background-color: #FFD166;
            color: #333;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            font-weight: bold;
            width: 100%;
            margin-top: 10px;
        }

        button:hover {
            background-color: #FFC044;
            transform: translateY(-2px);
        }

        button:active {
            transform: translateY(1px);
        }

        /* 游戏界面样式 */
        #gameScreen {
            width: 100%;
            height: 100%;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .game-header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding: 0 10px;
        }

        .word-count {
            font-size: 1.2rem;
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 15px;
            border-radius: 20px;
        }

        canvas {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            width: 100%;
            max-width: 100%;
            height: 70vh;
            touch-action: none;
        }

        .instructions {
            margin-top: 15px;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 12px;
            border-radius: 10px;
            width: 100%;
            text-align: center;
            font-size: 0.9rem;
        }

        /* Toast提示样式 */
        .toast {
            position: fixed;
            top: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 15px 25px;
            border-radius: 50px;
            font-size: 1.1rem;
            opacity: 0;
            transition: all 0.5s;
            z-index: 100;
            max-width: 80%;
            text-align: center;
        }

        .toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* 游戏结束界面 */
        #gameOverScreen {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 50;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
        }

        .game-over-content {
            background: rgba(255, 255, 255, 0.9);
            color: #333;
            padding: 30px;
            border-radius: 20px;
            max-width: 400px;
            width: 90%;
        }

        .game-over-content h2 {
            margin-bottom: 20px;
            font-size: 2rem;
            color: #6a11cb;
        }

        /* 响应式设计 */
        @media (max-width: 600px) {
            h1 {
                font-size: 2rem;
            }

            .subtitle {
                font-size: 1rem;
            }

            input,
            button {
                padding: 12px;
                font-size: 1rem;
            }

            .game-header {
                flex-direction: column;
                gap: 10px;
            }

            canvas {
                height: 60vh;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 起始界面 -->
        <div id="startScreen">
            <h1>丢掉XX</h1>
            <p class="subtitle">输入内容，丢掉他们！</p>

            <div class="input-group">
                <label for="wordInput">输入想要丢掉的内容</label>
                <input type="text" id="wordInput" placeholder="例如：痛苦">
            </div>

            <button id="startBtn">开始游戏</button>
        </div>

        <!-- 游戏界面 -->
        <div id="gameScreen">
            <div class="game-header">
                <div class="word-count">剩余数量: <span id="wordCount">0</span></div>
                <button id="backBtn">返回</button>
            </div>

            <canvas id="gameCanvas"></canvas>

            <div class="instructions">
                <p>向上拖动，丢掉他们！</p>
            </div>
        </div>

        <!-- 游戏结束界面 -->
        <div id="gameOverScreen">
            <div class="game-over-content">
                <h2>游戏结束</h2>
                <p id="gameOverMessage">它们全部都消失啦~</p>
                <button id="restartBtn">再玩一次</button>
            </div>
        </div>
    </div>

    <div id="toast" class="toast"></div>

    <script>
        // 获取DOM元素
        const startScreen = document.getElementById('startScreen');
        const gameScreen = document.getElementById('gameScreen');
        const gameOverScreen = document.getElementById('gameOverScreen');
        const gameCanvas = document.getElementById('gameCanvas');
        const ctx = gameCanvas.getContext('2d');
        const wordInput = document.getElementById('wordInput');
        const startBtn = document.getElementById('startBtn');
        const backBtn = document.getElementById('backBtn');
        const restartBtn = document.getElementById('restartBtn');
        const wordCountEl = document.getElementById('wordCount');
        const gameOverMessage = document.getElementById('gameOverMessage');
        const toast = document.getElementById('toast');

        // 游戏状态
        let gameStarted = false;
        let words = [];
        let isDragging = false;
        let draggedWord = null;
        let dragOffsetX = 0;
        let dragOffsetY = 0;
        let originalWords = [];

        // 物理参数
        const gravity = 0.2;
        const bounceFactor = 0.7;
        const friction = 0.98;

        // 初始化Canvas尺寸
        function initCanvas() {
            const container = gameCanvas.parentElement;
            gameCanvas.width = container.clientWidth;
            gameCanvas.height = container.clientHeight;
        }

        // 初始化游戏
        function initGame() {
            const inputText = wordInput.value.trim();
            if (!inputText) {
                showToast('请输入要消失的内容');
                return;
            }

            // 切换到游戏界面
            startScreen.style.display = 'none';
            gameScreen.style.display = 'flex';
            gameOverScreen.style.display = 'none';

            // 初始化Canvas
            initCanvas();

            gameStarted = true;
            words = [];

            // 随机生成5-10个词语
            const wordCount = Math.floor(Math.random() * 6) + 5;

            for (let i = 0; i < wordCount; i++) {
                words.push({
                    text: inputText,
                    x: Math.random() * (gameCanvas.width - 100) + 50,
                    y: -50 - Math.random() * 100, // 从屏幕上方开始
                    vx: (Math.random() - 0.5) * 2, // 随机水平速度
                    vy: Math.random() * 2 + 1, // 初始下落速度
                    width: inputText.length * 15 + 30, // 根据文字长度计算宽度
                    height: 60,
                    color: getRandomColor(),
                    isDragging: false
                });
            }

            // 更新词语计数
            updateWordCount();

            // 开始游戏循环
            requestAnimationFrame(gameLoop);
        }

        // 游戏主循环
        function gameLoop() {
            // 清空画布
            ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);

            // 绘制背景
            drawBackground();

            // 更新和绘制每个词语
            for (let i = 0; i < words.length; i++) {
                const word = words[i];

                if (!word.isDragging) {
                    // 应用重力
                    word.vy += gravity;

                    // 应用摩擦力
                    word.vx *= friction;
                    word.vy *= friction;

                    // 更新位置
                    word.x += word.vx;
                    word.y += word.vy;

                    // 边界碰撞检测
                    if (word.x < 0) {
                        word.x = 0;
                        word.vx = -word.vx * bounceFactor;
                    } else if (word.x + word.width > gameCanvas.width) {
                        word.x = gameCanvas.width - word.width;
                        word.vx = -word.vx * bounceFactor;
                    }

                    // 底部碰撞检测
                    if (word.y + word.height > gameCanvas.height) {
                        word.y = gameCanvas.height - word.height;
                        word.vy = -word.vy * bounceFactor;

                        // 如果速度很小，停止反弹
                        if (Math.abs(word.vy) < 0.5) {
                            word.vy = 0;
                        }
                    }
                }

                // 绘制词语
                drawWord(word);
            }

            // 继续游戏循环
            if (gameStarted) {
                requestAnimationFrame(gameLoop);
            }
        }

        // 绘制背景
        function drawBackground() {
            // 绘制渐变背景
            const gradient = ctx.createLinearGradient(0, 0, 0, gameCanvas.height);
            gradient.addColorStop(0, 'rgba(106, 17, 203, 0.3)');
            gradient.addColorStop(1, 'rgba(37, 117, 252, 0.3)');

            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);

            // 绘制屏幕四分之一高度的线
            const lineY = gameCanvas.height / 4;
            ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
            ctx.setLineDash([5, 5]);
            ctx.beginPath();
            ctx.moveTo(0, lineY);
            ctx.lineTo(gameCanvas.width, lineY);
            ctx.stroke();
            ctx.setLineDash([]);

            // 添加提示文字
            ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
            ctx.font = '20px sans-serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(`拖到这里，把${wordInput.value.trim()}丢掉！`, gameCanvas.width / 2, lineY - 20);
        }

        // 绘制单个词语
        function drawWord(word) {
            // 绘制圆角矩形背景
            ctx.beginPath();
            ctx.roundRect(word.x, word.y, word.width, word.height, 20);
            ctx.fillStyle = word.color;
            ctx.fill();
            ctx.strokeStyle = 'white';
            ctx.lineWidth = 2;
            ctx.stroke();

            // 绘制文字
            ctx.fillStyle = '#444';
            ctx.font = 'bold 24px sans-serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(word.text, word.x + word.width / 2, word.y + word.height / 2);

            // 如果正在拖拽，绘制拖拽效果
            if (word.isDragging) {
                ctx.beginPath();
                ctx.roundRect(word.x - 5, word.y - 5, word.width + 10, word.height + 10, 12);
                ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
                ctx.lineWidth = 2;
                ctx.setLineDash([5, 3]);
                ctx.stroke();
                ctx.setLineDash([]);
            }
        }

        // 获取随机颜色
        function getRandomColor() {
            const colors = [
                '#98FB98', '#87CEEB', '#E6E6FA', '#B0E0E6', '#F08080', '#98FB98', '#E0FFFF', '#FFDAB9', '#FFF0F5', '#F0FFF0'
            ];
            return colors[Math.floor(Math.random() * colors.length)];
        }

        // 显示提示
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');

            setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }

        // 更新词语计数
        function updateWordCount() {
            wordCountEl.textContent = words.length;
        }

        // 游戏结束
        function gameOver() {
            gameStarted = false;
            gameOverMessage.textContent = `所有的"${wordInput.value.trim()}"都消失啦~`;
            gameOverScreen.style.display = 'flex';
        }

        // 鼠标/触摸事件处理
        gameCanvas.addEventListener('mousedown', startDrag);
        gameCanvas.addEventListener('touchstart', startDrag, { passive: false });

        gameCanvas.addEventListener('mousemove', drag);
        gameCanvas.addEventListener('touchmove', drag, { passive: false });

        gameCanvas.addEventListener('mouseup', endDrag);
        gameCanvas.addEventListener('touchend', endDrag);
        gameCanvas.addEventListener('mouseleave', endDrag);

        // 开始拖拽
        function startDrag(e) {
            e.preventDefault();
            const rect = gameCanvas.getBoundingClientRect();
            const scaleX = gameCanvas.width / rect.width;
            const scaleY = gameCanvas.height / rect.height;

            let x, y;

            if (e.type === 'touchstart') {
                x = (e.touches[0].clientX - rect.left) * scaleX;
                y = (e.touches[0].clientY - rect.top) * scaleY;
            } else {
                x = (e.clientX - rect.left) * scaleX;
                y = (e.clientY - rect.top) * scaleY;
            }

            // 检查是否点击了词语
            for (let i = words.length - 1; i >= 0; i--) {
                const word = words[i];

                if (x >= word.x && x <= word.x + word.width &&
                    y >= word.y && y <= word.y + word.height) {
                    isDragging = true;
                    draggedWord = word;
                    word.isDragging = true;
                    dragOffsetX = x - word.x;
                    dragOffsetY = y - word.y;
                    break;
                }
            }
        }

        // 拖拽中
        function drag(e) {
            if (!isDragging || !draggedWord) return;

            e.preventDefault();
            const rect = gameCanvas.getBoundingClientRect();
            const scaleX = gameCanvas.width / rect.width;
            const scaleY = gameCanvas.height / rect.height;

            let x, y;

            if (e.type === 'touchmove') {
                x = (e.touches[0].clientX - rect.left) * scaleX;
                y = (e.touches[0].clientY - rect.top) * scaleY;
            } else {
                x = (e.clientX - rect.left) * scaleX;
                y = (e.clientY - rect.top) * scaleY;
            }

            // 更新被拖拽词语的位置
            draggedWord.x = x - dragOffsetX;
            draggedWord.y = y - dragOffsetY;

            // 限制拖拽范围
            if (draggedWord.x < 0) draggedWord.x = 0;
            if (draggedWord.x + draggedWord.width > gameCanvas.width) {
                draggedWord.x = gameCanvas.width - draggedWord.width;
            }
            if (draggedWord.y < 0) draggedWord.y = 0;
        }

        // 结束拖拽
        function endDrag(e) {
            if (!isDragging || !draggedWord) return;

            e.preventDefault();

            // 检查是否拖到屏幕四分之一以上
            if (draggedWord.y < gameCanvas.height / 4) {
                // 词语飞走
                const index = words.indexOf(draggedWord);
                if (index !== -1) {
                    const wordText = draggedWord.text;
                    words.splice(index, 1);
                    showToast(`"${wordText}"飞走啦~~~`);

                    // 更新词语计数
                    updateWordCount();

                    // 检查是否所有词语都飞走了
                    if (words.length === 0) {
                        setTimeout(() => {
                            gameOver();
                        }, 500);
                    }
                }
            }

            // 重置拖拽状态
            draggedWord.isDragging = false;
            isDragging = false;
            draggedWord = null;
        }

        // 返回起始界面
        function backToStart() {
            gameStarted = false;
            startScreen.style.display = 'block';
            gameScreen.style.display = 'none';
            gameOverScreen.style.display = 'none';
        }

        // 事件监听
        startBtn.addEventListener('click', initGame);
        backBtn.addEventListener('click', backToStart);
        restartBtn.addEventListener('click', backToStart);

        // 输入框回车事件
        wordInput.addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                initGame();
            }
        });

        // 窗口大小变化时调整Canvas
        window.addEventListener('resize', function () {
            if (gameScreen.style.display === 'flex') {
                initCanvas();
            }
        });

        // 添加roundRect方法（兼容性处理）
        if (!CanvasRenderingContext2D.prototype.roundRect) {
            CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
                if (w < 2 * r) r = w / 2;
                if (h < 2 * r) r = h / 2;
                this.beginPath();
                this.moveTo(x + r, y);
                this.arcTo(x + w, y, x + w, y + h, r);
                this.arcTo(x + w, y + h, x, y + h, r);
                this.arcTo(x, y + h, x, y, r);
                this.arcTo(x, y, x + w, y, r);
                this.closePath();
                return this;
            };
        }
    </script>
</body>

</html>